<template>
  <div class="cover">
    <span class="cover-item">
      <van-nav-bar title="订单中心"/>
    </span>
  </div>
  <!-- 订单列表 -->

  <div class="type">
    <van-tabs animated>
      <van-tab title="待付款">
        <van-cell-group>
          <van-cell icon="https://img.yzcdn.cn/vant/ipad.jpeg" title="麻辣烫"  />
          <van-card num="1" price="12.00" desc="微辣" title="好吃麻辣烫" thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
            <template #footer>
              <div slo="footer">
                <van-button size="mini" color="#FF0000">取消</van-button>
                <van-button size="mini" color="#FFD700">付款</van-button>
                <van-button size="mini" color="#FFD700" is-link url="/order/detail/:orderId">查看</van-button>
              </div>
            </template>
          </van-card>
          <van-card num="1" price="12.00" desc="微辣" title="好吃麻辣烫" thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
            <template #footer>
              <div slot="footer">
                <van-button size="mini" color="#FF0000">取消</van-button>
                <van-button size="mini" color="#FFD700">付款</van-button>
                <van-button size="mini" color="#FFD700" is-link url="/order/detail/:orderId">查看</van-button>
              </div>
            </template>
          </van-card>
        </van-cell-group>
      </van-tab>
      <van-tab title="已付款">
        <van-cell-group>
          <van-cell icon="https://img.yzcdn.cn/vant/ipad.jpeg" title="麻辣烫"  />
          <van-card num="1" price="12.00" desc="微辣" title="好吃麻辣烫" thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
            <template #footer>
              <div slot="footer">
                <van-button size="mini" color="#FF0000">删除</van-button>
                <van-button size="mini" color="#FFD700" is-link url="/order/detail/:orderId">查看</van-button>
              </div>
            </template>
          </van-card>
        </van-cell-group>
      </van-tab>

      <van-tab title="待签收">
        <van-cell-group>
          <van-cell icon="https://img.yzcdn.cn/vant/ipad.jpeg" title="麻辣烫"  />
          <van-card num="1" price="12.00" desc="微辣" title="好吃麻辣烫" thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
            <template #footer>
              <div slot="footer">
                <van-button size="mini" color="#FF0000">删除</van-button>
                <van-button size="mini" color="#FFD700">签收</van-button>
                <van-button size="mini" color="#FFD700" is-link url="/order/detail/:orderId">查看</van-button>
              </div>
            </template>
          </van-card>
        </van-cell-group>
      </van-tab>

      <van-tab title="已签收">
        <van-cell-group>
          <van-cell icon="https://img.yzcdn.cn/vant/ipad.jpeg" title="麻辣烫"  />
          <van-card num="1" price="12.00" desc="微辣" title="好吃麻辣烫" thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
            <template #footer>
              <div slot="footer">
                <van-button size="mini" color="#FF0000">删除</van-button>
                <van-button size="mini" color="#FF0000" is-Link url="/order/apeal/:orderId">申诉</van-button>
                <van-button size="mini" color="#FFD700" is-Link url="/ratingadd">评价</van-button>
              </div>
            </template>
          </van-card>
        </van-cell-group>
      </van-tab>

      <van-tab title="已评价">
        <van-cell-group>
          <van-cell icon="https://img.yzcdn.cn/vant/ipad.jpeg" title="麻辣烫"  />
          <van-card num="1" price="12.00" desc="微辣" title="好吃麻辣烫" thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
            <template #footer>
              <div slot="footer">
                <van-button size="mini" color="#FF0000">删除</van-button>
                <van-button size="mini" color="#FFD700" is-link url="/order/detail/:orderId">查看</van-button>
              </div>
            </template>
          </van-card>
        </van-cell-group>
      </van-tab>
    </van-tabs>
    
  </div>

  <!--底部-->
  <div style="margin-top: 40px">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="$router.push('/')">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="$router.push('/search')">搜索</van-tabbar-item>
      <van-tabbar-item icon="bill" @click="$router.push('/order')">订单</van-tabbar-item>
      <van-tabbar-item icon="manager-o" @click="$router.push('/user')">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue';
import http from "@/utils/request.js";

const active = ref(2);
const maxOrders = ref(0);
// 订单列表
const orderList = reactive([

])

const getOrderList = function () {
  http.get(
    '/order'
    ).then((res) => {//
    console.log("获取到的订单列表：", res.data);
    orderList.splice(0).forEach(order => {
      orderList.splice(0);//todo 需要将原有的元素清空
        res.data.data.orders.forEach(order => {
          orderList.push(order);
        });
        maxOrders.value = res.data.data.max_orders;
  })
})
}
//调用获取用户订单列表方法
getOrderList();
</script>

<style scoped lang="scss">
@import "../style/mixins.scss";
@import "../style/viriables.scss";

// 顶部
.van-nav-bar{
  background-color: #FFD700;
}
/*底部 */
/*默认选中首页时，首页图标显示蓝色*/
.docker-item-active {
  color: #38a038;
}

.docker {
  display: flex;
  width: 100%;
  height: 49px;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0px;

  &-item {
    flex: 1;
    text-align: center;

    .iconfont {
      margin: 5px 0 1px 0;
      font-size: 15px;
    }

    &-title {
      font-size: 15px;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
    }
  }
}
</style>
